<script lang="ts" setup>
	import { ref } from "vue";
	import {
		onShow,
		onHide,
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		getCurrentInstance
	} from 'vue'
	let postId = ref('')
	let detail = ref({})
	onLoad((options) => {
		postId.value = options.id
		getDetail()
	})
	const {
		proxy,
	} = getCurrentInstance();
	const getDetail = () => {
		let url = `${proxy.$api.newsDetail}/${postId.value}`
		proxy.$req('GET', url, {}).then((res) => {
			console.log(res);
			if (res.code != 200) {
				uni.showToast({
					title: res.message,
					icon: "none"
				})
				return
			}
			detail.value = res.result
		})
	}
</script>
<template>
	<view class="richFather">
		<view class="rfTit">
			{{ detail.title }}
		</view>
		<view class="rfInfo r-flex-start-center">
			<image :src="detail.avatar" mode=""></image>
			<view class="c-flex-between-start aaa">
				<text style="font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;">{{ detail.source }}</text>
				<text style="font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #B0B0B0;">{{ detail.create_time }}</text>
			</view>
		</view>
		<video class="itemImg" :src="detail.video_url" mode="" v-if="detail.video_url"></video>
		<view style="font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</view>
</template>
<style lang="scss">
	.richFather {
		width: calc(100% - 64rpx);
		padding: 50rpx 32rpx;

		.rfTit {
			font-size: 34rpx;
			font-weight: 600;
		}

		.itemImg {
			width: 100%;
			height: 360rpx;
		}

		.rfInfo {
			height: 80rpx;
			font-size: 26rpx;
			margin: 30rpx 0;

			.aaa {
				height: 100%;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>